<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>商品运营数据分析</title>
    <link rel="icon" href="favicon.ico" type="image/ico">
    <meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
    <meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
    <meta name="author" content="yinqi">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/materialdesignicons.min.css" rel="stylesheet">
    <link href="css/style.min.css" rel="stylesheet">
    <style>
        /* 第一种布局 */
        .card-pricing-row {
            padding: 5px 0px;
        }
        .card-pricing {
            text-align: center;
        }
        .card-pricing .specification-list {
            list-style: none;
            padding-left: 0;
            margin-top: 30px;
            margin-bottom: 30px;
        }
        .card-pricing .specification-list li {
            padding: 8px 0 12px;
            border-bottom: 1px solid rgba(77, 82, 89, 0.05);
            text-align: left;
            font-size: 12px;
            margin-bottom: 5px;
        }
        .card-pricing .specification-list li .name-specification {
            font-weight: 700;
        }
        .card-pricing .specification-list li .status-specification {
            margin-left: auto;
            float: right;
            font-weight: 400;
        }
        .card-pricing.card-pricing-focus {
            padding: 40px 5px;
            margin-top: -40px;
        }
        @media screen and (max-width: 970px) {
            .card-pricing.card-pricing-focus {
                margin-top: 0px;
            }
            .card-pricing-row {
                padding: 0px;
            }
        }
    </style>
</head>

<body>
<div class="container-fluid p-t-15">

    <div class="row">
        <div class="col-sm-12">
            <div class="card">
                <div class="card-header bg-info">
                    <h4>商品运营数据分析</h4>
                </div>
            </div>
        </div>
    </div>

    <div class="row card-pricing-row">
        <div class="col-md-4">
            <div class="card card-pricing">
                <div class="card-body">
                    <h3>今日商品销售排行榜</h3>
                    <div class="text-muted">
                        <p>销售前十：商品名称、销售数量</p>
                    </div>
                    <ul class="specification-list">
                        <li>
                            <span class="name-specification">商品名称</span>
                            <span class="status-specification">销售数量</span>
                        </li>
                        <li>
                            <span class="name-specification">设计可用性</span>
                            <span class="status-specification">99.99%</span>
                        </li>
                        <li>
                            <span class="name-specification">数据访问</span>
                            <span class="status-specification">实时访问</span>
                        </li>
                        <li>
                            <span class="name-specification">最短存储时间</span>
                            <span class="status-specification">无</span>
                        </li>
                        <li>
                            <span class="name-specification">Object 最小计量</span>
                            <span class="status-specification">无</span>
                        </li>
                        <li>
                            <span class="name-specification">商品名称</span>
                            <span class="status-specification">销售数量</span>
                        </li>
                        <li>
                            <span class="name-specification">设计可用性</span>
                            <span class="status-specification">99.99%</span>
                        </li>
                        <li>
                            <span class="name-specification">数据访问</span>
                            <span class="status-specification">实时访问</span>
                        </li>
                        <li>
                            <span class="name-specification">最短存储时间</span>
                            <span class="status-specification">无</span>
                        </li>
                        <li>
                            <span class="name-specification">Object 最小计量</span>
                            <span class="status-specification">无</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card card-pricing">
                <div class="card-body">
                    <h3>本周商品销售排行榜</h3>
                    <div class="text-muted">
                        <p>销售前十：商品名称、销售数量</p>
                    </div>
                    <ul class="specification-list">
                        <li>
                            <span class="name-specification">商品名称</span>
                            <span class="status-specification">销售数量</span>
                        </li>
                        <li>
                            <span class="name-specification">设计可用性</span>
                            <span class="status-specification">99.99%</span>
                        </li>
                        <li>
                            <span class="name-specification">数据访问</span>
                            <span class="status-specification">实时访问</span>
                        </li>
                        <li>
                            <span class="name-specification">最短存储时间</span>
                            <span class="status-specification">无</span>
                        </li>
                        <li>
                            <span class="name-specification">Object 最小计量</span>
                            <span class="status-specification">无</span>
                        </li>
                        <li>
                            <span class="name-specification">商品名称</span>
                            <span class="status-specification">销售数量</span>
                        </li>
                        <li>
                            <span class="name-specification">设计可用性</span>
                            <span class="status-specification">99.99%</span>
                        </li>
                        <li>
                            <span class="name-specification">数据访问</span>
                            <span class="status-specification">实时访问</span>
                        </li>
                        <li>
                            <span class="name-specification">最短存储时间</span>
                            <span class="status-specification">无</span>
                        </li>
                        <li>
                            <span class="name-specification">Object 最小计量</span>
                            <span class="status-specification">无</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card card-pricing">
                <div class="card-body">
                    <h3>本月商品销售排行榜</h3>
                    <div class="text-muted">
                        <p>销售前十：商品名称、销售数量</p>
                    </div>
                    <ul class="specification-list">
                        <li>
                            <span class="name-specification">商品名称</span>
                            <span class="status-specification">销售数量</span>
                        </li>
                        <li>
                            <span class="name-specification">设计可用性</span>
                            <span class="status-specification">99.99%</span>
                        </li>
                        <li>
                            <span class="name-specification">数据访问</span>
                            <span class="status-specification">实时访问</span>
                        </li>
                        <li>
                            <span class="name-specification">最短存储时间</span>
                            <span class="status-specification">无</span>
                        </li>
                        <li>
                            <span class="name-specification">Object 最小计量</span>
                            <span class="status-specification">无</span>
                        </li>
                        <li>
                            <span class="name-specification">商品名称</span>
                            <span class="status-specification">销售数量</span>
                        </li>
                        <li>
                            <span class="name-specification">设计可用性</span>
                            <span class="status-specification">99.99%</span>
                        </li>
                        <li>
                            <span class="name-specification">数据访问</span>
                            <span class="status-specification">实时访问</span>
                        </li>
                        <li>
                            <span class="name-specification">最短存储时间</span>
                            <span class="status-specification">无</span>
                        </li>
                        <li>
                            <span class="name-specification">Object 最小计量</span>
                            <span class="status-specification">无</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

</div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript">

</script>
</body>
</html>